<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="配置基本信息" name="1">
      <el-form ref="form" :model="typeForm" label-width="80px">
        <p>类型</p>
        <el-row>
          <el-col :span="3">
            <el-form-item label="平台类型">
              <el-select v-model="typeForm.platformType">
                <el-option label="pc" value="pc" />
                <el-option label="mobile" value="mobile" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="应用类型">
              <el-select v-model="typeForm.appType">
                <el-option label="dl2-ko" value="dl2-ko" />
                <el-option label="dl2hmt" value="dl2hmt" />
                <el-option label="xp0" value="xp0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="点击弹窗">
              <el-switch v-model="typeForm.needDialog" /> </el-form-item
          ></el-col>

          <el-col :span="3">
            <el-form-item label="上报类型">
              <el-select v-model="typeForm.reportType">
                <el-option label="google" value="google" />
                <el-option label="facebook" value="facebook" />
                <el-option label="tikTok" value="tikTok" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="typeForm.reportType">
            <el-form-item label="脚本">
              <el-input v-model="typeForm.script" :rows="4" type="textarea" />
            </el-form-item>
          </el-col> </el-row
      ></el-form>
      <el-form ref="form" :model="baseForm" label-width="80px">
        <p>配置基本信息（默认会根据选择类型自动生成，不需要更改）</p>
        <el-row>
          <el-col :span="12">
            <el-form-item label="logo">
              <el-input v-model="baseForm.faviconPath" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题">
              <el-input v-model="baseForm.title" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="关键词">
              <el-input v-model="baseForm.keywords" :rows="4" type="textarea" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关键信息">
              <el-input
                v-model="baseForm.description"
                :rows="4"
                type="textarea"
              />
            </el-form-item>
          </el-col> </el-row
      ></el-form>

      <el-form ref="form" :model="pathForm" label-width="80px">
        <p>
          存放路径配置（默认情况不需要修改，路径相对于html位置来进行设置，'../为相对路径
          /为绝对路径'）
        </p>
        <el-row>
          <el-col :span="6">
            <el-form-item label="html路径">
              <el-input v-model="pathForm.htmlSavePath" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="js路径">
              <el-input v-model="pathForm.jsSavePath" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="css路径">
              <el-input v-model="pathForm.cssSavePath" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="img路径">
              <el-input v-model="pathForm.imgSavePath" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { dl2koBase, dl2hmtBase, xp0Base } from "../baseScript";
const activeNames = ref([]);

let baseForm = reactive({
  faviconPath: "/assets/image/favicon-jws.ico",
  title: "무쌍전란",
  keywords:
    "무쌍，전란，삼국, 삼국지, Dynasty Legends，moossangjeonran，3D，free，games，RPG，MMO，ARPG，war，king，final，ultimate，Basara，unique，mjko，msjr，Moossang，uniquegames，진삼국무쌍, 오리진, 리니지",
  description:
    "무쌍전란, 삼국지 게임의 한계를 재정의하다!無적, 無패, 無쌍. 역대급 거대 삼국 RPG！",
});
const typeForm = reactive({
  needDialog: false,
  platformType: "pc", //pc mobile
  reportType: "google", //facebook, google, tikTok
  appType: "dl2-ko", //dl2-ko,xp0,dl2htt
  script: "",
});
const pathForm = reactive({
  jsSavePath: "../utils/download.js",
  cssSavePath: "../css/index.css",
  htmlSavePath: "/name",
  imgSavePath: "../img",
});
// 监听appType变化来初始化baseForm
watch(
  () => typeForm.appType,
  (val) => {
    console.log(val);

    if (val === "dl2-ko") {
      Object.assign(baseForm, dl2koBase); // 保持响应性的正确方式
    } else if (val === "xp0") {
      Object.assign(baseForm, xp0Base);
    } else if (val === "dl2hmt") {
      // 注意此处应与选项值完全一致
      Object.assign(baseForm, dl2hmtBase);
    }
  }
);
function getConfig() {
  return {
    ...baseForm,
    ...typeForm,
    ...pathForm,
  };
} // 暴露方法给父组件
defineExpose({
  getConfig,
});
</script>

<style lang="scss" scoped></style>
